import React from "react"
import {Button, Select} from "antd"

const {Option} = Select;

export default class Count extends React.Component {

  state = {
    sum: 0,
    currentValue: 1
  }

  handleChange = (value) => {
    this.setState({currentValue: value})
  }

  increment = () => {
    let {sum, currentValue} = this.state
    this.setState({sum: sum + Number(currentValue)})
  }

  decrement = () => {
    let {sum, currentValue} = this.state
    this.setState({sum: sum - Number(currentValue)})
  }
  incrementIfOdd = () => {
    let {sum, currentValue} = this.state
    if (sum % 2 !== 0) {
      this.setState({sum: sum + Number(currentValue)})
    }
  }
  incrementAsync = () => {
    let {sum, currentValue} = this.state
    setTimeout(() => {
      this.setState({sum: sum + Number(currentValue)})
    }, 500)
  }

  render() {
    return (
        <div>
          <h4>当前求和为：{this.state.sum}</h4>
          <Select defaultValue="1" onChange={this.handleChange}>
            <Option value="1">1</Option>
            <Option value="2">2</Option>
            <Option value="3">3</Option>
          </Select>
          &nbsp;
          <Button type="primary" size="small" onClick={this.increment}>+</Button>
          &nbsp;
          <Button type="primary" size="small" onClick={this.decrement}>-</Button>
          &nbsp;
          <Button type="primary" size="small" onClick={this.incrementIfOdd}>当前求和为奇数时再加</Button>
          &nbsp;
          <Button type="primary" size="small" onClick={this.incrementAsync}>异步加</Button>
        </div>
    )
  }
}